import React, { useState, useEffect } from 'react';
import { useSyncEffect } from '@/components/antd/utils/hooks';

const Demo = (props: any) => {
    const { data } = props;
    const [d, D] = useState();

    // useEffect(() => {
    //     console.log('###:  effect', 2);
    //     D(data)
    // }, [data]);

    useSyncEffect(() => {
        console.log('###:  sync', 1);
        // D(data);
    }, data);

    return <h3>{d}</h3>;
};

const Bar: React.FC = () => {
    const [data, setData] = useState([10]);
    const [aa, AA] = useState(1);

    return (
        <div>
            <h1>{data}</h1>
            <button
                onClick={() => {
                    // setData((d) => [...d, 2]);
                    AA((c) => c + 1);
                }}
            >
                add
            </button>

            <Demo data={data} />
        </div>
    );
};

export default Bar;
